<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
    <!-- v-cloak在Dom节点渲染完成之前不显示 -->
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <h2 >{{message}}</h2>
    <h2>{{message|date-format('yyyy-mm-dd')}}</h2>
</div>
<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>

    Vue.filter('date-format',function (input,pattern='') {
        let dt=new Date(input);
        // 获取年月日
        let y = dt.getFullYear();
        let m = (dt.getMonth()+1).toString().padStart(2,'0');
        let d = dt.getDate().toString().padStart(2,'0');
        //获取时分秒
        let hh = dt.getHours().toString().padStart(2,'0');
        let mm = dt.getMinutes().toString().padStart(2,'0');
        let ss = dt.getSeconds().toString().padStart(2,'0');

        //如果 传进来的字符串类型，转为小写后，等于 yyyy-mm-dd 那么就返回 年-月-日
        //否则 就返回 年-月-日-时-分-秒

        if(pattern.toLowerCase() == 'yyyy-mm-dd'){
            return `${y}-${m}-${d}`;
        }else{
            //ES6语法，将变量解析为字符串
            return `${y}-${m}-${d} ${hh}-${mm}-${ss}`;
        }

    });

    const app = new Vue({ //初始化一个VUE实例
        el: '#app',     // 用于页面渲染VUE实例的元素
        data: { // 定义数据
            message: new Date()
        }
    })
</script>

</body>
</html>